---
title: Tailwind CSS Stepper Examples - Material Tailwind 
description:  Create a seamless user journey with the versatile Tailwind CSS Stepper component. Customize and integrate it easily into your web project.

navigation:
  [
    "stepper",
    "stepper-with-icon",
    "stepper-with-dots",
    "stepper-with-contents",
    "stepper-with-custom-styles",
    "more-examples",
 ]
github: stepper
prev: spinner
next: switch
---

# Tailwind CSS Stepper 

Whether you're crafting a seamless user journey or simplifying complex forms, Material Tailwind's Stepper component comes in handy. It is designed to break down complex tasks or information into smaller, more manageable steps, making it easier for users to understand, navigate, and complete a series of actions.


<br />

<CodePreview
  id="stepper"
  link="stepper#stepper"
  component={<HTMLStepperExamples.DefaultStepper/>}
>
```html
<div class="w-full px-8 py-4">
  <div class="relative flex items-center justify-between w-full">
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-300"></div>
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-900 transition-all duration-500">
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-white transition-all duration-300 bg-gray-900 rounded-full place-items-center">
      1
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
      2
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
      3
    </div>
  </div>
  <div class="flex justify-between mt-16">
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button" disabled>
      Prev
    </button>
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Next
    </button>
  </div>
</div>
```
</CodePreview>

---

## Stepper With Icon

<CodePreview
  id="stepper-with-icon"
  link="stepper#stepper-with-icon"
  className="mt-4"
  component={<HTMLStepperExamples.StepperWithIcon/>}
>
```html
<div class="w-full px-8 py-4">
  <div class="relative flex items-center justify-between w-full">
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-300"></div>
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-900 transition-all duration-500">
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-white transition-all duration-300 bg-gray-900 rounded-full place-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25">
        </path>
      </svg>
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z">
        </path>
      </svg>
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495">
        </path>
      </svg>
    </div>
  </div>
  <div class="flex justify-between mt-16">
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button" disabled>
      Prev
    </button>
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Next
    </button>
  </div>
</div>
```
</CodePreview>

---


## Stepper With Dots

<CodePreview
  id="stepper-with-dots"
  link="stepper#stepper-with-dots"
  className="mt-4"
  component={<HTMLStepperExamples.StepperWithDots/>}
>
```html
<div class="w-full px-8 py-4">
  <div class="relative flex items-center justify-between w-full">
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-300"></div>
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-900 transition-all duration-500">
    </div>
    <div
      class="relative z-10 grid w-4 h-4 font-bold text-white transition-all duration-300 bg-gray-900 rounded-full place-items-center">
    </div>
    <div
      class="relative z-10 grid w-4 h-4 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
    </div>
    <div
      class="relative z-10 grid w-4 h-4 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
    </div>
  </div>
  <div class="flex justify-between mt-16">
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button" disabled>
      Prev
    </button>
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Next
    </button>
  </div>
</div>
```
</CodePreview>

---


## Stepper With Contents

<CodePreview
  id="stepper-with-contents"
  link="stepper#stepper-with-contents"
  className="mt-4"
  component={<HTMLStepperExamples.StepperWithContent/>}
>
```html
<div class="w-full px-24 py-4">
  <div class="relative flex items-center justify-between w-full">
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-300"></div>
    <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-gray-900 transition-all duration-500">
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-white transition-all duration-300 bg-gray-900 rounded-full place-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z">
        </path>
      </svg>
      <div class="absolute -bottom-[4.5rem] w-max text-center">
        <h6
          class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-gray-700">
          Step 1
        </h6>
        <p class="block font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
          Details about yout account.
        </p>
      </div>
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-white transition-all duration-300 bg-gray-900 rounded-full place-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M4.5 12a7.5 7.5 0 0015 0m-15 0a7.5 7.5 0 1115 0m-15 0H3m16.5 0H21m-1.5 0H12m-8.457 3.077l1.41-.513m14.095-5.13l1.41-.513M5.106 17.785l1.15-.964m11.49-9.642l1.149-.964M7.501 19.795l.75-1.3m7.5-12.99l.75-1.3m-6.063 16.658l.26-1.477m2.605-14.772l.26-1.477m0 17.726l-.26-1.477M10.698 4.614l-.26-1.477M16.5 19.794l-.75-1.299M7.5 4.205L12 12m6.894 5.785l-1.149-.964M6.256 7.178l-1.15-.964m15.352 8.864l-1.41-.513M4.954 9.435l-1.41-.514M12.002 12l-3.75 6.495">
        </path>
      </svg>
      <div class="absolute -bottom-[4.5rem] w-max text-center">
        <h6
          class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-blue-gray-900">
          Step 2
        </h6>
        <p class="block font-sans text-base antialiased font-normal leading-relaxed text-blue-gray-900">
          Details about yout account.
        </p>
      </div>
    </div>
    <div
      class="relative z-10 grid w-10 h-10 font-bold text-gray-900 transition-all duration-300 bg-gray-300 rounded-full place-items-center">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        aria-hidden="true" class="w-5 h-5">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0012 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75z">
        </path>
      </svg>
      <div class="absolute -bottom-[4.5rem] w-max text-center">
        <h6
          class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-gray-700">
          Step 3
        </h6>
        <p class="block font-sans text-base antialiased font-normal leading-relaxed text-gray-700">
          Details about yout account.
        </p>
      </div>
    </div>
  </div>
  <div class="flex justify-between mt-32">
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Prev
    </button>
    <button
      class="select-none rounded-lg bg-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none"
      type="button">
      Next
    </button>
  </div>
</div>
```
</CodePreview>

---



## Stepper With Custom Styles

<CodePreview
  id="stepper-with-custom-styles"
  link="stepper#stepper-with-custom-styles"
  className="mt-4"
  component={<HTMLStepperExamples.CustomStepper/>}
>
```html
<div class="w-full px-8 py-4">
  <div
    class="relative grid w-full h-24 m-0 overflow-hidden text-white shadow-lg place-items-center rounded-xl bg-gradient-to-tr from-gray-900 to-gray-800 bg-clip-border shadow-gray-900/20">
    <div class="w-full px-20 pt-4 pb-8">
      <div class="relative flex items-center justify-between w-full">
        <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-white/50"></div>
        <div class="absolute left-0 top-2/4 h-0.5 w-full -translate-y-2/4 bg-white transition-all duration-500">
        </div>
        <div
          class="relative z-10 grid h-4 w-4 cursor-pointer place-items-center rounded-full  !bg-white font-bold text-white ring-0 transition-all duration-300">
          <div class="absolute -bottom-[2.3rem] w-max text-center text-xs">
            <h6
              class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
              HTML
            </h6>
          </div>
        </div>
        <div
          class="relative z-10 grid h-4 w-4 cursor-pointer place-items-center rounded-full  !bg-blue-gray-50 font-bold text-white/75 transition-all duration-300">
          <div class="absolute -bottom-[2.3rem] w-max text-center text-xs">
            <h6
              class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
              React
            </h6>
          </div>
        </div>
        <div
          class="relative z-10 grid h-4 w-4 cursor-pointer place-items-center rounded-full  !bg-blue-gray-50 font-bold text-white/75 transition-all duration-300">
          <div class="absolute -bottom-[2.3rem] w-max text-center text-xs">
            <h6
              class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
              Vue
            </h6>
          </div>
        </div>
        <div
          class="relative z-10 grid h-4 w-4 cursor-pointer place-items-center rounded-full  !bg-blue-gray-50 font-bold text-white/75 transition-all duration-300">
          <div class="absolute -bottom-[2.3rem] w-max text-center text-xs">
            <h6
              class="block font-sans text-base antialiased font-semibold leading-relaxed tracking-normal text-inherit">
              Svelte
            </h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
</CodePreview>

---
<span id="more-examples"></span>

## Explore More Tailwind CSS Examples
Looking for more stepper examples? Check out our **<a href="https://www.material-tailwind.com/blocks/onboarding-sections" target="_blank">Onboarding Sections</a>** from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.


